<template>
  <div class="admin-container">
    <el-menu
      :default-active="selectedMenu"
      class="el-menu-vertical-demo menu-container"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      @select="handleMenuSelect"
    >
      <el-menu-item index="1">
        <i class="el-icon-menu"></i>
        <span slot="title">主题管理</span>
      </el-menu-item>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">相册管理</span>
      </el-menu-item>
      <el-menu-item index="3">
        <i class="el-icon-menu"></i>
        <span slot="title">照片管理</span>
      </el-menu-item>
    </el-menu>
    <!-- 右侧内容区域 -->
    <div class="content-area">
      <ThemeManagement v-if="currentTab == 'theme'" />
      <AlbumManagement v-else-if="currentTab == 'album'" />
      <PhotoManagement v-else-if="currentTab == 'photo'" />
    </div>
  </div>
</template>

<script>
import ThemeManagement from "./ThemeManagement.vue";
import AlbumManagement from "./AlbumManagement.vue";
import PhotoManagement from "./PhotoManagement.vue";

export default {
  name: "Admin",
  data() {
    return {
      currentTab: "album", // 默认显示相册管理
      selectedMenu: '2'
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleMenuSelect(index) {
      // 根据菜单索引设置当前选项卡
      switch (index) {
        case "1":
          this.currentTab = "theme";
          break;
        case "2":
          this.currentTab = "album";
          break;
        case "3":
          this.currentTab = "photo";
          break;
        default:
          break;
      }
      //   更新当前页面状态
      localStorage.setItem('currentTab', this.currentTab);
      localStorage.setItem('selectedMenu', index);
    },
  },
  components: {
    ThemeManagement,
    AlbumManagement,
    PhotoManagement,
  },
  mounted() {
    // 解决刷新会重置导航的问题
    this.currentTab = localStorage.getItem('currentTab')? localStorage.getItem('currentTab') : "album";
    this.selectedMenu = localStorage.getItem('selectedMenu')? localStorage.getItem('selectedMenu') : "2";
  },
};
</script>

<style scoped>
.admin-container {
  display: flex; /* 使用 Flexbox 布局 */
}

.el-menu {
  width: 10%; /* 菜单宽度为左侧的五分之一 */
  height: 100vh;
  background-color: #545c64;
  color: #fff;
}
.el-menu-item,
.el-submenu {
  width: 100%;
  white-space: nowrap; /* 避免内容换行 */
  overflow: hidden; /* 隐藏溢出部分 */
}
.menu-container {
  display: flex;
  flex-direction: column; /* 垂直布局 */
  justify-content: center; /* 垂直居中 */
}

.content-area {
  flex-grow: 1; /* 占据剩余空间 */
  height: 100vh; /* 保持与 el-menu 高度一致 */
  overflow-y: auto; /* 添加垂直滚动条 */
}
</style>